import { useToggle } from '@vueuse/core'
import { acceptHMRUpdate, defineStore } from 'pinia'

export const useThemeConfig = defineStore('themeConfig', () => {
  const themeConfig = reactive({
    asideWidth: 240,
    asideCollapsedWidth: 64,

    // left | top | mix
    menuLayoutMode: 'mix',
  })

  function updateThemeConfig({ k, v }) {
    themeConfig[k] = v
  }

  // 左侧菜单是否缩放
  const [isCollapse, toggleCollapse] = useToggle(false)

  // 面包屑是否显示
  const [isBreadcrumb, toggleBreadcrumb] = useToggle(true)

  // 标签页是否显示
  const [isTabNav, toggleTabNav] = useToggle(true)

  return {
    ...toRefs(themeConfig),

    isCollapse,
    toggleCollapse,

    isBreadcrumb,
    toggleBreadcrumb,

    isTabNav,
    toggleTabNav,

    updateThemeConfig,
  }
})

if (import.meta.hot)
  import.meta.hot.accept(acceptHMRUpdate(useThemeConfig, import.meta.hot))
